<template>
  <div>
    <template v-for="item in title" :key="item.id">
      <h1 @click="onClick(item)">{{ item }}</h1>
    </template>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, PropType } from 'vue'
import { emitter } from '../../index'
export default defineComponent({
  name: 'nav-bar',
  props: {
    title: {
      type: Array as PropType<string[]>
    }
  },
  // data() {
  //   return {}
  // },
  setup(props, context) {
    // 1. 定义数据 (proxy 响应式数据)
    const state = reactive({
      msg: '你好，我是Vue3的足迹'
    })

    // 定义函数
    const onClick = (item: string) => {
      // 发送一个自定义事件
      emitter.emit('nav-bar-title', item)
    }

    return {
      state,
      onClick
    }
  }
})
</script>
